<template>
  <div class="yongdian">
    <div class="tou">
      <div class="item_list">
        <img src="../assets/images/zongdian.png" alt="" class="img" />
        <div>
          <h2>72670</h2>
          <p>总用电量 (kw/h)</p>
        </div>
      </div>
      <div class="item_list">
        <img src="../assets/images/zongshui.png" alt="" class="img" />
        <div>
          <h2>66666</h2>
          <p>总用水量 (kw/h)</p>
        </div>
      </div>
    </div>
    <div class="biao" ref="biao"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, reactive, onMounted,watch } from "vue";
const biao = ref();
let asd;
const option = reactive({
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [
        "0:00",
        "2:00",
        "4:00",
        "6:00",
        "8:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Line 4",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 0, 135)",
          },
          {
            offset: 1,
            color: "rgb(135, 0, 157)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [220, 402, 231, 134, 190, 230, 120, 321, 453, 273, 126, 111, 222],
    },
  ],
});
onMounted(()=>{
    asd=echarts.init(biao.value)
    asd.setOption(option)
})
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});



</script>

<style lang="scss">
.yongdian {
  width: 90%;
  height: 90%;
  margin: 0 5%;
  color: #fff;
  .tou {
    width: 100%;
    height: 25%;
    margin-top: 2%;
    display: flex;
    justify-content: space-between;

    .item_list {
      width: 48%;
      height: 100%;
      background: url("../imgs/小border.png") no-repeat;
      display: flex;
      text-align: center;
      .img {
        width: 20%;
        height: 50%;
        margin: 10% 12% 0%;
      }
      div {
        margin-top: 10%;
      }
    }
  }
}
.biao {
  width: 100%;
  height: 84%;
}
</style>
